<template>
  <div class="ArtShow">
    <div class="showitem" v-for="item in Artlist" :key="item.id">
      <div class="item_tx">
        <img :src="`https://ss.lanqb.com/${item.profile.avatar}`" />
        <span>{{ item.profile.nickname }}</span>
      </div>
      <span>{{ item.content }}</span>
      <div class="pic">
        <img :src="`https://ss.lanqb.com/${item.works.url}`" alt="" />
      </div>
      <ul class="tags" >
        <li v-for="i in item.tags" :key="i">{{i}}</li>
      </ul>
      <div class="like">
        <span>
          <van-icon name="eye-o" />
          {{item.statistics.hits_num}}
        </span>
        <span>
          <van-icon name="chat-o" />
          {{item.statistics.comment_num}}
        </span>
        <span>
<van-icon name="like-o" />
          {{item.statistics.like_num}}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ArtShow",
  props: ["Artlist"],
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.ArtShow {
  .showitem {
    .item_tx {
      padding-top: 25px;
      display: flex;
      align-items: center;
      width: 90%;
      margin: 0 auto;
      height: 32px;
      >span{
        margin-left: 10px;
        font-size: 16px;
      }
      >img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
      }
    }
    >span{
      width: 90%;
      display: inline-block;
      margin-left: 20px;
      margin-top: 15px;
    }
    .pic{
      margin-top: 10px;
      width: 200px;
      height: 268px;
      >img{
        width: 100%;
        height: 100%;
        margin-left: 20px;
        border-radius: 5px;
      }
    }
    ul{
      display: flex;
      width: 222px;
      margin-left: 15px;
      height: 26px;
      flex-wrap: wrap;
      li{
        padding:0px 10px;
        font-size: 12px;
        margin: 5px;
        flex-shrink: 0;
        word-wrap: normal;
        border-radius: 25px;
        background-color: #f7f7f7;
        color: #5b6164;
      }
    }
    .like{
      display: flex;
      justify-content: space-around;
      font-size: 20px;
      color: #5b6164;
      margin-top: 10px;
    }
  }
}
</style>
